<template>
    <div class="MyNowClassRoot">
        <div>
            <div @click="openOption">
                <div><el-text class="title"><el-icon>
                            <Notebook />
                        </el-icon> 课程：</el-text></div>
                <el-text type="primary" class="class">{{ show_class_name }} </el-text>
                <el-text v-if="!show_class_name" type="primary" class="class">&nbsp</el-text>
                <div><el-text class="title"><el-icon>
                            <Timer />
                        </el-icon> 时间:</el-text></div>
                <el-text type="primary" class="class">{{ show_class_time }} </el-text>
                <el-text v-if="!show_class_time" type="primary" class="class">&nbsp</el-text>
                <div><el-text class="title"><el-icon>
                            <AddLocation />
                        </el-icon> 地址:</el-text></div>
                <el-text type="primary" class="class">{{ show_class_address }} </el-text>
                <el-text v-if="!show_class_address" type="primary" class="class">&nbsp</el-text>
            </div>
        </div>
    </div>
    <OptionView @userOk="OptionOk" ref="OptionViewRef">
        <el-form label-width="auto">

            <el-form-item label="选择日期:">
                <el-date-picker v-model="Search_Time" :editable="false" type="date" :clearable="false"
                    value-format="YYYY-MM-DD">
                    <template #prev-year>
                        <el-icon>
                            <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <g stroke-width="1" fill-rule="evenodd">
                                    <g fill="currentColor">
                                        <path
                                            d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" />
                                    </g>
                                </g>
                            </svg>
                        </el-icon>
                    </template>
                </el-date-picker>
                <el-text type="warning" v-if="Search_Time_Tip">未选择日期</el-text>
            </el-form-item>
            <transition name="el-zoom-in-top">
                <el-form-item v-if="show_time_list" style="width: 100%;" class="OptionListView">
                    <div class="TitleTop">
                        <div class="ClassListofItem ClassListofItemBord" style="color:var(--text-red-color)">课程名称</div>
                        <div class="ClassListofItem ClassListofItemBord border-right-left"
                            style="color:var(--text-orange-color);">
                            上课时间
                        </div>
                        <div class="ClassListofItem ClassListofItemBord" style="color:var(--text-blue-color);">上课地点
                        </div>
                    </div>
                    <el-scrollbar style="width:100%" height="100px" class="OptionList">
                        <div style="width: 100%;">
                            <div @click="getArticleItem(index)" :class="classItem.ClassStyle"
                                v-for="(classItem, index) in Search_Time_Day_Class" :key="index">
                                <transition name="el-zoom-in-top">
                                    <div v-show="true" class="OptionClassItem">
                                        <el-text truncated class="ClassListofItem">{{
                                            classItem.ClassName
                                            }}</el-text>
                                        <el-text class="ClassListofItem">{{
                                            classItem.ClassTime }}</el-text>
                                        <el-text class="ClassListofItem">{{
                                            classItem.ClassAddress }}</el-text>
                                    </div>
                                </transition>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-form-item>

            </transition>
            <transition name="el-zoom-in-top">
                <el-form-item class="add_icon">
                    <div style="margin-left: auto;">
                        <el-button v-if="show_time_list && user_select_class.index != null" type="danger"
                            @click="delete_user_select_class()" class="add_icon_button" :icon="Delete" size="small"
                            circle />
                        <el-button v-if="Search_Time" @click="Search_Time_Day_Class_add_Data()" class="add_icon_button"
                            type="success" size="small" :icon="Plus" circle />
                    </div>
                </el-form-item>
            </transition>
            <transition name="el-zoom-in-top">
                <div v-show="user_select_class.isShow">
                    <el-form-item label="显示课程:"><el-input v-model="user_select_class.name"></el-input>
                        <transition name="el-fade-in">
                            <el-text type="warning" v-show="maxLengthTip">字数不能超过5个字！</el-text>
                        </transition>
                    </el-form-item>

                    <el-form-item label="上课地址:"><el-input v-model="user_select_class.address"></el-input></el-form-item>
                    <el-form-item label="上课时间:"><el-time-picker :editable="false"
                            v-model="user_select_class.time" /></el-form-item>
                </div>
            </transition>
        </el-form>
    </OptionView>
</template>
<script setup>
import store from "@/store/store";
import axios from "axios";
import { ref, watch, onMounted, computed, reactive } from "vue";
import { Plus, Delete } from '@element-plus/icons-vue'
import OptionView from "../OptionView/OptionView.vue";
import { ElMessage } from "element-plus";
let show_class_name = ref("");  //不要动
let class_name = ref("默认课程");
let show_class_time = ref("");
let class_time = ref("3:53")
let class_address = ref("默认地址");
let show_class_address = ref("");  //不要动
let OptionViewRef = ref(null);
let init = true; // 用来标记是否为首次加载的变量

let emit = defineEmits(['LoadingOK', 'LoadingNO'])

let Search_Time = ref("")
let Search_Time_Tip = computed(() => {
    if (Search_Time.value == "") {
        return true
    } else {
        return false
    }
})

let Search_Time_Day_Class = ref([])
let show_time_list = computed(() => {
    if (Search_Time_Day_Class.value.length == 0) {
        return false
    } else {
        return true
    }
})

// 刷新选择(不删除选择的时间)
function 刷新选择() {
    Search_Time_Day_Class.value = [];
    Delete_Class_select();
    user_select_class.isShow = false;
}

watch(Search_Time, () => {
    // 获取选择时间的课程
    // 模拟网络请求,这个网络请求记得Select_Time发送过去

    let url = "http://" + store.state.ip + ":" + store.state.port + "/get_user_day_class_data"
    axios.post(url, {
        date: Search_Time.value
    }).then((response) => {
        刷新选择();
        for (let i = 0; i < response.data.data.length; ++i) {
            Search_Time_Day_Class_add_Data(response.data.data[i].class_name, response.data.data[i].class_time, response.data.data[i].class_address)
        }
        Search_Time_Day_Class按照时间排序();
    })
})

let default_ClassName = "新课程"
let default_ClassTime = "0:00"
let default_ClassAddress = "新地点"

// Search_Time_Day_Class添加数据
function Search_Time_Day_Class_add_Data(ClassName = default_ClassName, ClassTime = default_ClassTime, ClassAddress = default_ClassAddress) {
    // 后端有时候会传递7:30之类的，处理下
    if (ClassTime.split(":")[0].length < 2) {
        ClassTime = '0' + ClassTime.split(":")[0] + ":" + ClassTime.split(":")[1]
    }
    Search_Time_Day_Class.value.push({
        ClassName,
        ClassTime,
        ClassAddress,
        ClassStyle: ""
    })
}

// Search_Time_Day_Class按照时间排序
function Search_Time_Day_Class按照时间排序() {
    Search_Time_Day_Class.value.sort((a, b) => {
        return new Date(Search_Time.value + " " + a.ClassTime).getTime() - new Date(Search_Time.value + " " + b.ClassTime).getTime()
    })
}

// 删除课程
function delete_user_select_class() {
    let index;
    for (let i = 0; i < Search_Time_Day_Class.value.length; i++) {
        if (Search_Time_Day_Class.value[i].ClassStyle == 'articleItem') {
            index = i;
        }
    }
    Search_Time_Day_Class.value.splice(user_select_class.index, 1)
    Delete_Class_select();
}

// 选择的课程
let user_select_class = reactive({
    isShow: false,
    index: null,
    name: "",
    time: "",
    address: "",
})
// 获取选择的课程
// 不填参数为什么都不选择
function getArticleItem(index = null) {
    if (index == null) {
        for (let i = 0; i < Search_Time_Day_Class.value.length; i++) {
            Search_Time_Day_Class.value[i].ClassStyle = ""
        }
        user_select_class.index = null;

        user_select_class.isShow = false;
    } else {

        for (let i = 0; i < Search_Time_Day_Class.value.length; i++) {
            Search_Time_Day_Class.value[i].ClassStyle = ""
        }

        Search_Time_Day_Class.value[index].ClassStyle = "articleItem";
        user_select_class.isShow = true;
        user_select_class.name = Search_Time_Day_Class.value[index].ClassName;
        user_select_class.time = new Date(Search_Time.value + " " + Search_Time_Day_Class.value[index].ClassTime);     //这里转换下兼容的时间
        user_select_class.address = Search_Time_Day_Class.value[index].ClassAddress;
        user_select_class.index = index;
    }
}
let maxLengthTip = ref(false)
function setUserForm(newValue, oldValue) {
    // 让选择的课程名称不超过5个字
    if (user_select_class.name.length > 5) {
        maxLengthTip.value = true
    } else {
        maxLengthTip.value = false
    }
    // 给正在选择的表单赋值
    Search_Time_Day_Class.value[newValue.index].ClassName = newValue.name;
    Search_Time_Day_Class.value[newValue.index].ClassTime = (newValue.time).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false });
    Search_Time_Day_Class.value[newValue.index].ClassAddress = newValue.address;

}
function Delete_Class_select() {
    user_select_class_watch()
    getArticleItem();
    user_select_class_watch = watch(user_select_class, (newValue, oldValue) => {
        setUserForm(newValue);
    })
}


//检测选择的课程
let user_select_class_watch = watch(user_select_class, (newValue) => {
    setUserForm(newValue)
})

// 用户点击确定
function OptionOk() {
    if (maxLengthTip.value == false) {

        if (Search_Time_Tip.value == false) {
            OptionViewRef.value['OptionVisible'].value = false;
            let url = "http://" + store.state.ip + ":" + store.state.port + "/set_user_day_class_data"
            axios.post(url, {
                date: Search_Time.value,
                class_list: Search_Time_Day_Class.value
            }).then((response) => {
                刷新选择();
                Search_Time.value = ""
                ElMessage({
                    message: '设置成功',
                    type: 'success',
                })
                get_networkData();
            })

        } else {
            ElMessage.error("格式不符合条件，请选择时间")
        }
    } else {
        ElMessage.error("格式不符合条件，请检查你的输入")
    }
}



// 文字 的显示动画
function ShowClassaddChar(stringValue, showStringValue, timeSleep = 90, index = 0) {
    if (index == stringValue.length) {
        return "";
    }
    setTimeout(() => {
        showStringValue.value += stringValue[index];
        ShowClassaddChar(stringValue, showStringValue, timeSleep, index + 1);
    }, timeSleep);     // 动画速度
}

// 检查变量的更改，执行显示操作
watch(class_name, (new_value) => {
})
watch(class_address, (newValue) => {
})

function get_networkData() {

    let url = "http://" + store.state.ip + ":" + store.state.port + "/get_user_now_class_data"
    axios.post(url).then((response) => {
        class_name.value = response.data.data.class_name;
        class_address.value = response.data.data.class_address;
        class_time.value = response.data.data.class_time;
        //Loading结束
        emit('LoadingOK');
        // 显示动画
        show_class_time.value = ""
        show_class_address.value = ""
        show_class_name.value = ""
        ShowClassaddChar(class_time.value, show_class_time, 65)
        ShowClassaddChar(class_address.value, show_class_address, 70)
        ShowClassaddChar(class_name.value, show_class_name, 60);
    })
}
let openOption;
onMounted(() => {
    openOption = () => {
        OptionViewRef.value['title'].value = "设置";
        OptionViewRef.value['OptionVisible'].value = true;
    }
    // 从网络拿数据
    get_networkData();
})

</script>
<style scoped>
.TitleTop {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    border-bottom: 1px solid var(--el-color-info-light-7);
}

.add_icon {
    margin-bottom: 6px;
    display: flex;

}

.OptionListView {
    border-radius: 4px;
    user-select: none;
    border: 0.5px solid var(--el-color-info-light-7);
    box-shadow: inset 0px 0px 2px 2px #8a8a8a1a;
    margin-bottom: 4px;
}

.border-right-left {
    border-left: 1px solid var(--el-color-info-light-7);
    border-right: 1px solid var(--el-color-info-light-7);

}

.articleItem {
    background-color: var(--MyNowClassOptionClassList);
    transition: background-color 400ms;

}

.ClassListofItem {
    font-size: 1.1em;
    text-align: center;

}

.ClassListofItemBord {
    font-weight: bolder;
}

.OptionClassItem {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
}

.class {
    font-weight: bolder;
}

.title {
    font-size: 0.7em;
}

.MyNowClassRoot {
    width: 100%;
    height: 100%;
    margin: 10px;
    margin-top: 20px;
    margin-left: 10px;
}
</style>